<template>
  <div>
    <Cartheader>
      <!-- 具名卡槽 -->
      <template v-slot:headname>{{flower}}</template>
    </Cartheader>
    <div class="image">
      <img src="https://cdn.huaduocai.net/Storage/Shop/1/Products/28/1.png" alt />
    </div>
    <div class="title">
      <div class="product-title">静静思念--16支白菊花，勿忘我、扇尾叶点缀搭配。</div>
      <div class="product-other">
        <p>
          <span class="fuhao">￥</span>
          <span class="price">159.00</span>
          <span class="price-other-out">￥299.00</span>
          <span class="product-volume fr" ref="product">已售：13284</span>
        </p>
      </div>
    </div>
    <div class="hdx-advantage">
      <div class="advantage-item">
        <span class="i iconfont icon-quangou"></span>
        <span class="tishi">品质保障</span>
      </div>
      <div class="advantage-item">
        <span class="i iconfont icon-quangou"></span>
        <span class="tishi">品质保障</span>
      </div>
      <div class="advantage-item">
        <span class="i iconfont icon-quangou"></span>
        <span class="tishi">品质保障</span>
      </div>
    </div>
    <div class="warp">
      <div class="list clearfix" v-for="item in list" :key="item.label">
        <div class="label fl">{{item.label}}</div>
        <div class="content fl">{{item.content}}</div>
      </div>
    </div>
    <div class="weizhi"></div>
    <div class="number-warp">
      <div class="number-label">数量</div>
      <div class="shopp-number">
        <div class="number-plus" @click="plus">-</div>
        <input type="Number" name="number" id="goodCnt" class="number-input" v-model="shuliang" />
        <div class="number-reduce" @click="reduce">+</div>
      </div>
    </div>
    <div class="weizhi"></div>
    <div class="pingjia">
      <div class="pingjia-title">
        <span>订单评价</span>
        <span class="jiantou iconfont icon-jiantou fr"></span>
      </div>
      <div class="comment">
        <div class="comment-btn">查看全部评价</div>
      </div>
    </div>
    <div class="weizhi"></div>
    <div class="display-map">
      <div class="map">图文详情</div>
      <img v-for="item in images" :key="item" :src="item" alt />
    </div>
    <div class="tabbar">
      <div class="tabbar-item1 fl">
        <div class="ti1" @click="home">
          <span class="tubiao iconfont icon-shouye"></span>
          <span class="text">首页</span>
        </div>
      </div>
      <div class="tabbar-item1 fl">
        <div class="ti1" @click="cart">
          <span class="tubiao iconfont icon-gouwuche"></span>
          <span class="text">购物车</span>
        </div>
      </div>
      <div class="tabbar-item1 fl">
        <div class="ti1" @click="phone">
          <span class="tubiao iconfont icon-dkw_xiaoxi"></span>
          <span class="text">电话</span>
        </div>
      </div>
      <div class="tabbar-cart fl">加入购物车</div>
      <div class="buy-cart fl">立即购买</div>
    </div>
    <br />
    <br />
    <br />
    <br />
  </div>
</template>
<script>
const Cartheader = () => import("@/components/Cart-header.vue");
export default {
  data() {
    return {
      flower: "静静思念",
      list: [
        {
          label: "花语",
          content: "心酸的表情,伤感的往事.无尽的哀愁,愿来生再聚"
        },
        {
          label: "花材",
          content: "16支白菊花，勿忘我、扇尾叶点缀搭配。"
        },
        {
          label: "包装",
          content: "蓝色纸内层，白色纸外层纸扇形包装，蓝白色丝带蝴蝶结。"
        },
        {
          label: "配送",
          content: "本地区各市县、乡镇、街道（市区内免费配送）"
        },
        {
          label: "赠送",
          content: "下单填写留言，即免费赠送精美贺卡！"
        }
      ],
      images: [
        "https://cdn.huaduocai.net//Storage/Shop/1/goodsFormat/4800744936968722.jpg",
        "https://cdn.huaduocai.net//Storage/Shop/1/Products/28/Details/6361255900363894142457035.jpg",
        "https://cdn.huaduocai.net//Storage/formatPicture/1/5150872344181641.jpg"
      ],
      shuliang: 1
    };
  },
  methods: {
    plus() {
      if (this.shuliang > 1) {
        this.shuliang--;
      }
    },
    reduce() {
      this.shuliang++;
    },
    home() {
      this.$router.push("/home");
    },
    cart() {
      this.$router.push("/cart");
    },
    phone() {
      this.$router.push("/phone");
    }
  },
  components: {
    Cartheader
  },
  mounted() {
    let pHeight = this.$refs.product.parentNode.offsetHeight;
    let spanHeight = this.$refs.product.offsetHeight;
    this.$refs.product.style.marginTop = (pHeight - spanHeight) / 2 + "px";
  }
};
</script>
<style scoped lang="scss">
@function vw($px) {
  @return ($px / 375) * 100vw;
}

.image {
  img {
    width: vw(375);
  }
}
.title {
  height: vw(93.6);
  padding: 0 vw(15);
  .product-title {
    padding: vw(8) 0;
    font-weight: 700;
    font-size: vw(15);
    line-height: 1.4;
    letter-spacing: vw(1);
  }
  .product-other {
    padding: 0 0 vw(12);
    p {
      .fuhao {
        font-weight: 700;
        font-size: vw(24);
        color: #f46;
        line-height: 1;
      }
      .price {
        font-weight: 700;
        font-size: vw(24);
        color: #f46;
        line-height: 1;
      }
      .price-other-out {
        margin-left: vw(4);
        color: #b4babf;
        line-height: 1;
        font-size: vw(14);
        font-family: "微软雅黑";
        text-decoration: line-through;
      }
      .product-volume {
        font-size: vw(12);
      }
    }
  }
}
.hdx-advantage {
  box-sizing: border-box;
  padding: vw(8) vw(15);
  height: vw(33.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7;
  .advantage-item {
    .i {
      font-size: vw(16);
      color: #f46;
    }
    .tishi {
      font-size: vw(12);
      color: #b5b5b5;
      margin-left: vw(5);
    }
  }
}
.warp {
  .list {
    padding: vw(8) vw(15);
    box-sizing: border-box;
    font-size: vw(14);
    .label {
      padding: 0 15px 0 0;
      color: #999;
    }
    .content {
      width: vw(302);
      letter-spacing: 1px;
    }
    .content::after {
      content: "";
      display: block;
      height: vw(1);
      width: 100%;
      background-color: #f2f2f2;
    }
  }
}
.weizhi {
  width: vw(375);
  height: vw(10);
  background-color: #f7f7f7;
}
.number-warp {
  padding: vw(6) vw(15);
  display: flex;
  .number-label {
    padding: 0 vw(15) 0 0;
    height: vw(30);
    line-height: vw(30);
    font-size: vw(14);
  }
  .shopp-number {
    height: vw(30);
    width: vw(120);
    border: vw(1) solid #f2f2f2;
    border-radius: vw(4);
    display: flex;
    .number-plus {
      width: vw(40);
      height: vw(30);
      text-align: center;
      line-height: vw(30);
      font-size: vw(22);
      color: #ccc;
    }
    .number-input {
      width: vw(20);
      padding: 0 vw(10);
      border-width: 0 vw(1);
      border-style: solid;
      border-color: #f2f2f2;
      text-align: center;
      border-radius: 0;
      font-size: vw(16);
      color: #8b8b8b;
    }
    .number-reduce {
      width: vw(40);
      height: vw(30);
      text-align: center;
      line-height: vw(30);
      font-size: vw(22);
      color: #ccc;
    }
  }
}
.pingjia {
  padding: 0 vw(15);
  height: vw(97.8);
  .pingjia-title {
    height: vw(45.8);
    line-height: vw(45.8);
    font-size: vw(14);
    .jiantou {
      font-size: vw(26);
      color: #cecece;
      font-weight: 700;
    }
  }
  .pingjia-title::after {
    content: "";
    display: block;
    height: vw(1);
    width: 100%;
    background-color: #f2f2f2;
  }
  .comment {
    padding: vw(10) 0;
    .comment-btn {
      margin: 0 auto;
      width: vw(150);
      height: vw(30);
      font-size: vw(12);
      padding: 0 vw(14);
      color: #f46;
      line-height: vw(30);
      text-align: center;
      border-radius: vw(30);
      border: vw(1) solid #f46;
    }
  }
}
.display-map {
  .map {
    padding: vw(12) vw(15);
    font-size: vw(14);
    border-bottom: vw(1) solid #f2f2f2;
  }
  img {
    width: vw(375);
  }
}
.tabbar {
  width: 100%;
  height: vw(50);
  position: fixed;
  bottom: 0;
  z-index: 10;
  background-color: #fff;
  .tabbar-item1 {
    width: vw(53.6);
    height: vw(50);
    .ti1 {
      text-align: center;
      margin: vw(8) auto;
      .tubiao {
        display: block;
        font-size: vw(18);
      }
      .text {
        display: block;
        font-size: vw(12);
      }
    }
  }
  .tabbar-cart {
    width: vw(107);
    background-color: #ff9800;
    line-height: vw(50);
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-size: vw(14);
  }
  .buy-cart {
    width: vw(107);
    background-color: #f46;
    line-height: vw(50);
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-size: vw(14);
  }
}
</style>